<template>
  <div style="width: 38%; margin: 10px auto; order-radius: 20px; ">
    <div style="background-color: white; padding: 10px; border: 1px solid #ccc; border-radius: 10px; height: 525px; ">
      <!--  列表标题-->
      <div style="margin: 10px 0; color: SlateBlue; font-size: 16px">
        <el-icon style="vertical-align: middle;"><UserFilled/></el-icon>
        <b style="padding-left: 10px">好友列表 </b>
      </div>

      <!--  好友列表-->
      <div style="flex: 1; color: SlateBlue; border: 1px solid #ccc;  height: 450px;  font-size: 10px;overflow-y: scroll; border-radius: 3%">
        <!--  动态获取好友-->
        <div style="padding: 6px; border: 1px solid #ccc; " v-for="(item,index) in state.addfriends" :key="index" :class="{'left-list' : active == item.id}" @click="startCall(item)" >
          <div style="display:flex;" >
            <img style="width: 40px; height: 40px; margin-right: 20px; border-radius: 50%"
                 :src="item.user.avatar"
                 alt="">
            <div style="flex: 1; line-height: 20px">
              <div style="font-weight: bold"> {{ item.user.username }} </div>
              <div style="font-size: 12px; color: #999">{{ item.user.address}}</div>
            </div>
            <div>
              <el-button  type="primary"  @click="call" >视频通话</el-button>

            </div>

          </div>
        </div>
      </div>

    </div>
  </div>
  <div style="width: 45%; margin: 10px auto">
    <router-view></router-view>
  </div>


</template>

<script setup>

import {onBeforeRouteUpdate, useRoute} from 'vue-router'
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import router from "@/router";
import {useUserStore} from "@/stores/user";


let route = useRoute();
let fid = ref('')
const active = ref('');
const query = reactive({to:'',pageNum:1,pageSize:10})
const userStore = useUserStore()
const user = userStore.getUser
const state = reactive({
  addfriends: [],
  message:[]
})

onBeforeRouteUpdate((to)=>{
  fid = to.query.fid
  console.log(fid)

})

onMounted(()=>{
  console.log(fid)
  getuid()
})

const getuid = ()=>{
  console.log(fid)
  query.to = route.query.fid
  fid = route.query.fid
}

// 获取当前用户所有好友
const load2 = () => {
  request.get('/friends/hot', {
    params: {
      pageNum: 1,
      pageSize: 20
    }
  }).then(res => {
    state.addfriends = res.data.records
    console.log(res.data.records)
  })
}

load2()

// 点击对话，对话框变色
const startCall = (res)=>{
  active.value = res.id
  fid =  res.fid
}

const call =  () =>{
  if(fid === undefined){
    ElMessage.error("快选择好友进行视频通话吧")
  }
  else{
    // type 1 为开始请求通话  2 为回应通话
    router.push({ path:"item" , query: {from: user.id, type:1}})
  }

}
</script>
<style scoped>
.left-list{
  background-color: #eaeaea;
}
</style>
